<template>
  <div>
    <h3>组件通讯ref</h3>
    <Child ref="child" />
    <button @click="handclick">获取子组件数据，或者调用子组件方法</button>
  </div>
</template>

<!--<script>-->
<!--import Child from './Child.vue'-->
<!--export default {-->
<!--  name: 'ref',-->
<!--  components: {-->
<!--    Child-->
<!--  },-->
<!--  methods: {-->
<!--    handclick() {-->
<!--      // 获取子组件的数据-->
<!--      console.log(this.$refs.child.name)-->
<!--      // 调用子组件的方法-->
<!--      this.$refs.child.childFn('world')-->
<!--      //获取子组件的数据msg-->
<!--      console.log(this.$refs.child.msg)-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<script setup>
import { ref } from 'vue'
defineOptions({
  name: 'ref'
})
import Child from './Child.vue'
const child = ref(null)
const handclick = () => {
  // 获取子组件的数据
  console.log('获取子组件的数据name:', child.value.name)
  // 调用子组件的方法
  child.value.childFn('world')
  //获取子组件的数据msg
  console.log('获取子组件的数据msg:', child.value.msg)
}
</script>
